<template>
  <div
    class="app-container"
    style="background-color: #ffffff;
    width: 92%;
    border-radius: 5px;
    height: 95%;
    margin: 20px auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"
  >
    <div style="background-color: rgba(249, 249, 249, 1);width: 100%;height: 60px;">
      <span
        style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;font-style: normal;font-size: 16px;text-align: left;line-height: 20px;position: absolute;margin: 20px;"
      >时序开关统一管理</span>
    </div>
    <div class="power-manage-content">
      <div v-if="tribunalPowerInfo">
        <div v-for="(tribunalPower, key1) in tribunalPowerInfo" :key="key1">
          <el-row class="tribunal-box" style="padding-top: 10px;padding-bottom: 10px;color: #333333;font-weight: bolder">
            <el-col>
              <i class="el-icon-s-home" style="color: #1d4aff " />
              {{ tribunalPower.tribunalName }}
            </el-col>
          </el-row>
          <div v-for="(power,key2) in tribunalPower.powerInfoMap" :key="key2">
            <el-row style="padding-top: 3px;padding-bottom: 3px">
              <el-col :span="20">
                <i class="el-icon-setting" style="color: #1d4aff " />
                {{ power.powerName }}
              </el-col>
              <el-col :span="4">
                <el-row style="text-align: right">
                  <el-col :span="10">
                    <el-button type="success" plain style="cursor: pointer" @click="openAllChannel(key1,key2)">
                      全开
                    </el-button>
                  </el-col>
                  <el-col :span="10">
                    <el-button type="info" plain @click="closeAllChannel(key1,key2)">全关</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row :class="power.channelNum==8?'power-row1-8':'power-row1-16'">
              <el-col :span="3" :class="power.powerChannelFullInfoList[0].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 0)">
                {{ power.powerChannelFullInfoList[0].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[1].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 1)">
                {{ power.powerChannelFullInfoList[1].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[2].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 2)" >
                {{ power.powerChannelFullInfoList[2].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[3].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 3)">
                {{ power.powerChannelFullInfoList[3].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[4].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 4)">
                {{ power.powerChannelFullInfoList[4].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[5].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 5)">
                {{ power.powerChannelFullInfoList[5].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[6].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 6)">
                {{ power.powerChannelFullInfoList[6].equipmentName }}
              </el-col>
              <el-col  :span="3" :class="power.powerChannelFullInfoList[7].isOn?'channel-item-last channel-item channel-item-on': 'channel-item-last channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 7)">
                {{ power.powerChannelFullInfoList[7].equipmentName }}
              </el-col>
            </el-row>
            <el-row v-if="power.channelNum==16" :class="power.channelNum==8?'power-row2-8':'power-row2-16'">
              <el-col :span="3" :class="power.powerChannelFullInfoList[8].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 8)">
                {{ power.powerChannelFullInfoList[8].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[9].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 9)">
                {{ power.powerChannelFullInfoList[9].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[10].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 10)">
                {{ power.powerChannelFullInfoList[10].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[11].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 11)">
                {{ power.powerChannelFullInfoList[11].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[12].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 12)">
                {{ power.powerChannelFullInfoList[12].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[13].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 13)">
                {{ power.powerChannelFullInfoList[13].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[14].isOn?'channel-item channel-item-on': 'channel-item channel-item-off'" @click.native="changeChannelStatus(key1, key2, power, 14)">
                {{ power.powerChannelFullInfoList[14].equipmentName }}
              </el-col>
              <el-col :span="3" :class="power.powerChannelFullInfoList[15].isOn?'channel-item-last  channel-item channel-item-on': 'channel-item-last  channel-item channel-item-off'"  @click.native="changeChannelStatus(key1, key2, power, 15)">
                {{ power.powerChannelFullInfoList[15].equipmentName }}
              </el-col>
            </el-row>
          </div>

        </div>
      </div>
      <div v-else>
        没有配置时序器
      </div>
    </div>
  </div>
</template>

<script>
import { selectTribunalByCourtCode } from '@/api/tribunal'
import { updateTribunalCamera, addTribunalCamera } from '@/api/tribunalCamera'
import { listCourt } from '@/api/court'
import { getAllTypeTribunalEquipmentList, selectTribunalEquipmentListByType } from '@/api/tribunalEquipment'
import {
  getPowerChannelsInfo,
  getPowerChannelStatusByPowerId,
  getTribunalsHasPowers,
  savePowerChannelInfo, setAllPowerChannelStatusByPowerId, setPowerChannelStatusByPowerId
} from '@/api/powerConfig'
export default {
  name: 'PowerChannelInfo',
  data() {
    return {
      disabled: false,
      tribunals: [],
      tribunalPowerInfo: null,
      codeNum: '',
      equipmentList: [],
      configChannel: null,
      // 遮罩层
      loading: true,
      loading2: true,
      powerConfigList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 案件表格数据
      trialList: [],
      burnList: [],
      // 弹出层标题
      title: '',
      title2: '',
      // 是否显示弹出层
      open: false,
      open2: false,
      // 默认排序
      defaultSort: { prop: 'caseName', order: 'ascending' },
      judge: [],
      secretary: [],
      courtCode: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        powerId: null,
        courtCode: null,
        tribunalName: null,
        caseName: null,
        number: null,
        type: null,
        action: null,
        dept: null,
        party: null,
        chiefJudger: null,
        undertakerNumber: null,
        judge: '',
        judgeNumber: null,
        beginTime: null,
        clerkName: '',
        clerkNumber: null,
        tribunalCode: null,
        isDel: null
      },
      // 表单参数
      form2: {},
      // 表单参数
      form: {},
      options: [],
      TribunalOptions: [],
      powerOptions: [],
      // 表单校验
      rules: {
        caseName: [
          { required: true, message: '案号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTribunalsHasPower()
  },
  methods: {
    openAllChannel(tribunalId, powerId) {
      console.log(tribunalId)
      console.log(powerId)
      this.changeAllChannel(tribunalId, powerId, 1)
    },
    closeAllChannel(tribunalId, powerId) {
      console.log(tribunalId)
      console.log(powerId)
      this.changeAllChannel(tribunalId, powerId, 2)
    },
    changeAllChannel(tribunalId, powerId, switchStatus) {
      const ipowerId = parseInt(powerId)
      const data = {
        powerId: ipowerId,
        switchStatus: switchStatus
      }
      setAllPowerChannelStatusByPowerId(data).then(res => {
        console.log(res)
      })
    },
    changeChannelStatus(tribunalId, powerId, powerInfo, index) {
      console.log(tribunalId)
      console.log(powerId)
      console.log(powerInfo)
      console.log(index)
      const channelIndex = index + 1
      const powerChannelFullInfoList = powerInfo.powerChannelFullInfoList
      const powerChannelFullInfo = powerChannelFullInfoList[index]
      let switchStatus = false
      if (powerChannelFullInfo.isOn) {
        switchStatus = 2
      } else {
        switchStatus = 1
      }
      const data = {
        tribunalId: tribunalId,
        powerId: powerId,
        switchStatus: switchStatus,
        channelIndex: channelIndex
      }
      setPowerChannelStatusByPowerId(data).then(res => {
        console.log(res)
        const that = this
        setTimeout(function() {
          that.getPowerStatusByPowerId(tribunalId, powerId)
        })
      })
    },
    getPowerStatusByPowerId(tribunalId, powerId) {
      const data = { powerId: parseInt(powerId) }
      getPowerChannelStatusByPowerId(data).then(res => {
        console.log(res)
        if (res.success) {
          const statusList = res.data
          console.log(statusList)
          if (statusList != null && statusList.length > 0) {
            const powerInfo = this.tribunalPowerInfo[tribunalId]
            const powerInfoMap = powerInfo.powerInfoMap
            const powerChannelInfo = powerInfoMap[powerId]
            if (powerChannelInfo !== undefined && powerChannelInfo != null) {
              const powerChannelInfoList = powerChannelInfo.powerChannelInfoList
              for (let i = 0; i < statusList.length; i++) {
                const status = statusList[i]
                powerChannelInfoList[i].isOn = status
              }
              powerChannelInfo.powerChannelInfoList = powerChannelInfoList
            }
            powerInfoMap[powerId] = powerChannelInfo
            powerInfo.powerInfoMap = powerInfoMap
            this.tribunalPowerInfo[tribunalId] = powerInfo
          }
        }
      })
    },
    getTribunalsHasPower() {
      const data = {}
      getTribunalsHasPowers(data).then(res => {
        console.log(res)
        const success = res.success
        if (success) {
          this.tribunalPowerInfo = res.data
          for (const tribunalId in this.tribunalPowerInfo) {
            console.log(tribunalId)
            console.log(this.tribunalPowerInfo[tribunalId])
            const powerInfo = this.tribunalPowerInfo[tribunalId]
            const powerInfoMap = powerInfo.powerInfoMap
            for (const powerId in powerInfoMap) {
              this.getPowerStatusByPowerId(tribunalId, powerId)
            }
          }
        } else {
          this.tribunalPowerInfo = null
        }
      })
    },
    cancelPowerConfig() {
      this.showConfigForm = false
      this.resetChannelForm()
    },
    savePowerConfig() {
      this.channelForm.powerId = this.queryParams.powerId
      savePowerChannelInfo(this.channelForm).then(res => {
        const success = res.success
        if (success) {
          this.showConfigForm = false
          this.resetChannelForm()
          this.getPowerChannelInfo()
        }
      })
    },
    resetChannelForm() {
      this.channelForm = {
        channelIndex: 1,
        equipmentId: null,
        channelInfoId: 0,
        equipmentName: ''
      }
    },
    getEquipmentsByTribunalCode() {
      const data = {
        tribunalCode: this.queryParams.tribunalCode
      }
      getAllTypeTribunalEquipmentList(data).then(response => {
        console.log(response)
        const success = response.success
        if (success) {
          const equipmentList = response.data
          equipmentList.push({ id: 5008, name: '其它' })
          this.equipmentList = equipmentList
        } else {
          this.equipmentList = []
          this.$message.error(response.msg)
        }
      })
    },
    // 根据法院代码查询法庭信息
    selectTribunalByCourtCode() {
      selectTribunalByCourtCode(this.queryParams.courtCode).then(response => {
        this.TribunalOptions = response.data
        if (this.TribunalOptions != null && this.TribunalOptions.length > 0) {
          this.queryParams.tribunalCode = this.TribunalOptions[0].id
          this.getPowerEquipmentsByTribunalCode()
        } else {
          this.powerOptions = []
          this.queryParams.tribunalCode = null
          this.TribunalOptions = null
        }
        // this.getList()
      })
    },
    // 根据法庭id查询时序电源
    getPowerEquipmentsByTribunalCode() {
      this.queryParams.type = 'power'
      selectTribunalEquipmentListByType(this.queryParams).then(response => {
        console.log(response)
        if (response.success) {
          this.powerOptions = response.data
          if (this.powerOptions.length > 0) {
            this.queryParams.powerId = this.powerOptions[0].id
            this.getPowerChannelInfo()
          }
        }
      })
    },
    getPowerChannelInfo() {
      getPowerChannelsInfo(this.queryParams).then(response => {
        console.log(response)
        const success = response.success
        if (success) {
          const powerConfigList = response.data.powerConfigList
          const powerChannelInfoList = response.data.powerChannelInfoList
          const powerChannelDict = []
          if (powerChannelInfoList.length > 0) {
            for (let i = 0; i < powerChannelInfoList.length; i++) {
              powerChannelDict[powerChannelInfoList[i].channelIndex] = powerChannelInfoList[i]
            }
          }
          for (let i = 0; i < powerConfigList.length; i++) {
            const index = powerConfigList[i].sort
            if (powerChannelDict[index] !== undefined) {
              powerConfigList[i].channelInfoId = powerChannelDict[index].id
              powerConfigList[i].channelInfo = powerChannelDict[index]
            } else {
              powerConfigList[i].channelInfoId = 0
            }
          }
          this.powerConfigList = powerConfigList
          console.log(powerConfigList)
        } else {
          this.$message.error(response.msg)
          this.powerConfigList = []
        }
      })
    },
    /** 查询法院列表 */
    getCourtList() {
      listCourt().then(response => {
        this.options = response.data.clist
        this.queryParams.courtCode = response.data.courtCode
        if (this.options.length <= 1) {
          this.disabled = true
        }
        this.selectTribunalByCourtCode()
        this.getList()
      })
    },

    // 排序
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset2()
      this.open = true
      this.title = '添加法庭摄像头信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset2()
      console.log(JSON.stringify(row))
      this.form2 = row
      this.open = true
      this.title = '修改法庭摄像头信息'
    },
    save() {
      if (this.form2.id != null) {
        updateTribunalCamera(this.form2).then(response => {
          this.$message({ message: '修改成功', type: 'success' })
          this.open = false
          this.getList()
        })
      } else {
        this.form2.courtCode = this.queryParams.courtCode
        addTribunalCamera(this.form2).then(response => {
          this.$message({ message: '保存成功', type: 'success' })
          this.open = false
          this.getList()
        })
      }
    },
    resetForm() {
      this.queryParams.caseName = ''
      this.queryParams.ktdd = ''
      this.queryParams.clerk = ''
      this.queryParams.judge = ''
      this.queryParams.beginTime = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
  width: 10px;
  height: 10px;
  background-image: url("../../assets/imgs/u749.png");
}
::v-deep .el-input__inner {
  height: 32px;
}

.channel-item {
  cursor: pointer;
  text-align: center;
  border-width: 1px;
  border-color: #333333;
  border-style: solid;
  border-right: none;
}

.channel-item-on{
  background-color: darkgreen;
  color: white;
}
.channel-item-off{
  background-color: rgba(169, 169, 169, 0.83);
}
.channel-item-last{
  border-right-style: solid;
  border-right-color: #333333;
  border-right-width: 1px;
}
.power-row1-16 .channel-item{
  border-bottom: none !important;
}

.power-row1-16 .channel-item{
  padding-top: 30px;
  padding-bottom: 30px;
}
.power-row1-8 .channel-item{
  padding-top: 30px;
  padding-bottom: 30px;
}

.power-row2-16 .channel-item{
  padding-top: 30px;
  padding-bottom: 30px;
}

</style>
